<ix-page-header
  [tooltip]="'Use Instances to configure Incus-based containers (LXC) or VMs (QEMU) in TrueNAS.' | translate"
  [customBadgeTitle]="'Experimental' | translate"
>
  <ix-all-instances-header></ix-all-instances-header>
</ix-page-header>

<ix-master-detail-view
  #masterDetailView="masterDetailViewContext"
  [showDetails]="masterList.isSelectedInstanceVisible()"
  [selectedItem]="selectedInstance()"
>
  <ix-instance-list
    #masterList
    master
    [ixUiSearch]="searchableElements.elements.list"
    [isMobileView]="masterDetailView.isMobileView()"
    (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
  ></ix-instance-list>

  <ng-container detail-header>
    {{ 'Details for' | translate }}
    {{ selectedInstance()?.name }}
  </ng-container>

  <ng-container detail>
    @let instance = selectedInstance();
    @if (instance) {
      <ix-instance-details
        [instance]="instance"
      ></ix-instance-details>
    }
  </ng-container>
</ix-master-detail-view>
